import React, { Component } from 'react';

export default class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      name: '',
      article: '',
      fruits: ['apple', 'bananer', 'pearl'],
      myLike: '',
      sex: '',
      myLikes: []
    };
  }

  anchorClick = (event) => {
    console.log(event);
    // return false; // 在vue当中是可以阻止事件传播，在这里不行了。
    event.preventDefault(); // 阻止事件传播。
  };

  inputChange = (e) => {
    console.log(e.target.value); // 事件对象event本身是携带数据的，现在要取出它来。
  };

  textareaChange = (e) => {
    console.log(e.target.value); // 事件对象event本身是携带数据的，现在要取出它来。
  };

  textChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value
    });
  };

  selectChange = (e) => {
    console.log(e.target.value);

    this.setState({
      myLike: e.target.value
    });
  };

  radioChange = (e) => {
    this.setState({
      sex: e.target.value
    });
  };

  // 通过checked和value两个参数来取值。
  checkboxChange = (e) => {
    // 1 先确认一下，当前的对象是否checked

    if (e.target.checked) {
      // 2 如果是checked，没有取过值的话，则加入myLikes
      console.log(this.state.myLikes.indexOf(e.target.value)); // 有的话，显示下标值，无的话，就显示-1。

      if (this.state.myLikes.indexOf(e.target.value) === -1) {
        this.setState({
          myLikes: [...this.state.myLikes, e.target.value]
        });
      }
    } else {
      // 3 如果checked是false，已经取过值，就要从myLikes里删除。
      // 4、先确定一下，当前的值在myLikes里位置。
      let { myLikes } = this.state;
      this.state.myLikes.map((fruit, i) => {
        if (fruit === e.target.value) {
          console.log(i);
          // 删除指定下载的值
          myLikes.splice(i, 1); // splice()方法能够改变数组本身。
        }
      });
      this.setState({
        myLikes: [...myLikes]
      });
    }
  };

  render() {
    return (
      <div>
        <p>
          姓名：
          <input name='name' value={null} onChange={this.textChange} />
        </p>
        <textarea name='article' onChange={this.textChange} />
        <p>姓名：{this.state.name}</p>
        <p>文章：{this.state.article}</p>
        <select onChange={this.selectChange}>
          <option value='apple'>苹果</option>
          <option value='bananer'>香蕉</option>
          <option value='pearl'>梨</option>
        </select>
        <p>我喜欢的水果是：{this.state.myLike}</p>
        单选框
        <input type='radio' name='sex' value='boy' onChange={this.radioChange} />
        <input type='radio' name='sex' value='girl' onChange={this.radioChange} />
        <p>姓别：{this.state.sex}</p>
        <p>复选框</p>
        <label>
          苹果
          <input type='checkbox' value='apple' onChange={this.checkboxChange} />
        </label>
        <label>
          香蕉
          <input type='checkbox' value='bananer' onChange={this.checkboxChange} />
        </label>
        <label>
          梨
          <input type='checkbox' value='pearl' onChange={this.checkboxChange} />
        </label>
        <p>我喜欢的水果是：{this.state.myLikes}</p>
      </div>
    );
  }
}
